<template>
    <div>
        <el-dialog title="新增用户" :visible.sync="dialog_user" @close="close" width="700px">
            <el-form ref="data.form" :model="data.form" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="data.form.name"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="data.form.name"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="data.form.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="data.form.name"></el-input>
                </el-form-item>
                <el-form-item label="地区">
                    <el-row >
                        <el-con :span="3">
                            <el-select v-model="data.form.region" label-width="30px"  placeholder="请选择活动区域">
                                <el-option label="区域一" value="shanghai"></el-option>
                            </el-select>
                        </el-con>
                        <el-con :span="3">
                            <el-select v-model="data.form.region" placeholder="请选择活动区域">
                                <el-option label="区域一" value="shanghai"></el-option>
                            </el-select>
                        </el-con>
                        <el-con :span="3">
                            <el-select v-model="data.form.region" placeholder="请选择活动区域">
                                <el-option label="区域一" value="shanghai"></el-option>
                            </el-select>
                        </el-con>
                        <el-con :span="3">
                            <el-select v-model="data.form.region" placeholder="请选择活动区域">
                                <el-option label="区域一" value="shanghai"></el-option>
                            </el-select>
                        </el-con>
                    </el-row>
                </el-form-item>

                <el-form-item label="即时配送">
                    <el-switch v-model="data.form.delivery"></el-switch>
                </el-form-item>
                <el-form-item label="活动性质">
                    <el-checkbox-group v-model="data.form.type">
                    <el-checkbox label="线上活动" name="type"></el-checkbox>
                    <el-checkbox label="地推活动" name="type"></el-checkbox>
                    <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                    <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="特殊资源">
                    <el-radio-group v-model="data.form.resource">
                    <el-radio label="线上品牌商赞助"></el-radio>
                    <el-radio label="线下场地免费"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="活动形式">
                    <el-input type="textarea" v-model="data.form.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { reactive ,ref, watch } from '@vue/composition-api';

export default {
    name: "dialogInfo",
    props: {
        flag:{
            type: Boolean,
            default: false,
        }
    },
    //vue3.0
    setup(props, { root, emit }) {
        const dialog_user = ref(false);
        const data = reactive({
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            }
        })
        const onSubmit = (()=> {
            console.log('submit!')
        })
        const close = () => {
            dialog_user.value=false;
            emit("update:flag",false);
            //'close' 即回调父组件的close属性 update:flag 在index文件添加修饰器.sync 
            // this.$emit('close',false);
            /*  <dailogUser :flag.sync="dialog_user" @close="closeDailog"></dailogUser>
                const dialog_user = ref(false); 
                const closeDailog = (()=>{
                dialog_user.value = false
                }) 
            */
            
        }

        //vue2.0
        // data() {
        //   return {
        //   }
        // },
        // vue2.0
        //单向数据流，父级 -> 子级
        // methods: {
        //   close() {
        //     this.dialog_info_flag=false
        //     console.log(111)
        //     this.$emit("update:flag",false);
        //     //'close' 即回调父组件的close属性
        //     // this.$emit('close',false);
        //   },
        // },
        
        watch(()=>{
            dialog_user.value = props.flag;
            // console.log(props.flag, '')
        })
        return{
            data,dialog_user,close,onSubmit
        }
    }
}
</script>

<style>

</style>